<html>
    <head>
        <title>绑定HTML Class</title>
    </head>
    <body>
        <script>
            // ★、绑定 Html Class
                         
                     // ★、一、对象语法：
                                    /*
                                        我们可以传给 v-bind:class 一个对象，以动态地切换 class: 

                                              <div v-bind:class="{ active: isActive}"></div>

                                              上面的语法表示 active 这个 class 存在与否，将取决于数据property isActive的 truthiness.

                                              你可以在对象中传入更多字段来冬天切换多个class.
                                    */

                                    /*
                                        此外，v-bind:class 指令也可以与普通的 class attribute共存。
                                        当有如下模板：

                                            <div  
                                                class="static"
                                                v-bind:class="{ active:isActive,'text-danger':hasError}"     对象perporty 有无'' 都一样
                                            >
                                            </div>
                                    */
                                            // 有如下data:
                                                data:{
                                                    isActiove:true,
                                                    hasError:false
                                                }
                                            // 渲染结果为:  <div class="static active"></div>

                                            /*
                                                当 isActive 或者  hasError变化时， class 列表将相应地更新。

                                                另外，绑定的数据对象也不是必须内联式的声明在模板里：
                                                也可以这样：
                                                    <div :class="classObject"></div>
                                            */
                                                data:{
                                                    classObject:{
                                                        active:true,
                                                        'text-danger':false
                                                    }
                                                }

                                            /*
                                                我们还可以给class属性绑定一个"计算属性" 。这是一个常用且强大的模式。
                                                eg:
                                                    <div v-bind:class="classObject"></div>
                                            */
                                                data:{
                                                    iaActive:true,
                                                    error:null
                                                },
                                                computed:{
                                                    classObject:function(){
                                                         return {
                                                            active:this.iaActive && !this.error,
                                                            'text-danger':this.error && this.error.type==='fatal'
                                                         }   
                                                    }
                                                }
                     
                    // ★、二、数组语法：
                                //  我们可以把一个数组传给 v-bind:class ，以应用一个class列表
                                        // eg:   <div v-bind:class="[activeClass,errorClass]"></div>   注意： 这里数组中的元素是class名称，是类名不是对象名
                                                data:{
                                                    activeClass:'active',
                                                    errorClass:'text-danger'
                                                }                 
                                    // 如果你也想根据条件切换列表中的Class，可以使用三元表达式：
                                        // eg:  <div v-bind:class="[isActive? activeClass:'',errorClsss]"></div>

                                    /*
                                        这样写将始终添加errorClass, 但是只有在 isActive 是 truth时才添加 activeClass。

                                        不过，当有多个条件class时，这样写有些繁琐。
                                        所以，在数组语法中也可以使用 "对象语法"：

                                           eg：  <div v-bind:class="[{active:isActive},errorClass]"
                                    */   
                                   


                    // ★、三、用在组件上
                                    
                                // 这个章节假设你已经对 Vue 组件有了一定的了解。 当然你也可以先跳过这里，稍后再回过头来看。

                                /*
                                        当在一个"自定义组件"上使用 class property时，这些Class 将会被添加到"该组件的根元素"上面。
                                        这个元素上已经存在的 class 不会被覆盖
                                */

                                    // 例如： 如果你声明了这个组件：
                                                Vue.component('my-component',{
                                                    template:'<p class="foo bar">Hi </p>'
                                                });

                                            /*
                                                然后在使用它的时候添加一些 class：
                                                 
                                                        <my-component class="baz boo"></my-component>

                                                Html将被渲染为：

                                                        <p class="foo bar baz boo">Hi </p>

                                                对于带有数据绑定的class也同样适用：
                                                         
                                                        <my-component v-bind:class="{ active:isActive}"></my-component>
                                                        当 isActive 为 truth时，HTML将被渲染成为：
                                                        <p class="foo bar active">Hi </p>
                                            */ 
                                                
        </script>
    </body>
</html>